<template>
  <div>
    <Input v-model="projectAddressName" :placeholder="placeholder" readonly>
      <Icon v-if="!disabled" class="icon-pin" type="md-pin" color="#2d8cf0" slot="suffix" @click="openMap"/>
    </Input>

    <Modal
      v-model="modalValue"
      width="950"
      title="请输入或点击地图选择地址"
      :mask-closable="false"
    >
      <div class="com-show-input-border modal-address">
        <Input element-id="suggestId" v-model="modalAddress" placeholder="请输入地址" @on-change="onChange"></Input>
      </div>
      <div id="l-map"></div>

      <Row slot="footer" type="flex" justify="center">
        <BtnPlain type="primary" @click="modalValue = false">取消</BtnPlain>
        <Button type="primary" @click="onSub">确定</Button>
      </Row>
    </Modal>
  </div>
</template>

<script>
export default {
  name: "mapSearch",
  model: {
    prop: "value",
    event: "input",
  },
  props: {
    // 地址
    value: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    placeholder: {
      type: String,
      default: "请点击右侧图标选择项目地址",
    },
    info: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    value: {
      handler(val) {
        this.projectAddressName = val;
      },
    },
  },
  data() {
    return {
      projectAddressName: "",
      modalValue: false,
      customOverlay: null,
      location: {},
      map: null,
      address: "",
      modalAddress: "",
      ac: null,
    };
  },
  methods: {
    setMap() {
      this.map = new BMapGL.Map("l-map");
      this.map.enableScrollWheelZoom(true);

      // 地图点击事件
      var geoc = new BMapGL.Geocoder();
      this.map.addEventListener("click", async (e) => {
        const { lng, lat } = e.latlng;

        geoc.getLocation(
          e.latlng,
          (rs) => {
            let area = province === city ? district : city;
            if (!rs.addressComponents.city) {
              rs.addressComponents.city = rs.addressComponents.district;
              rs.addressComponents.district = "";
              area = "";
            }
            console.log(rs, "rs.addressComponents");
            let { province, city, district } = rs.addressComponents;
            const title = rs.surroundingPois[0]
              ? rs.surroundingPois[0].title
              : "";
            this.address = rs.address + title;
            this.ac.setInputValue(this.address);

            this.createMarker(lng, lat, this.address, province, city, area);
          },
          { poiRadius: 100, numPois: 5 }
        );
      });

      // 输入框提示
      this.ac = new BMapGL.Autocomplete({
        input: "suggestId",
        location: this.map,
      });
      this.ac.addEventListener("onconfirm", (e) => {
        //鼠标点击下拉列表后的事件
        var _value = e.item.value;
        console.log(e, "eeee");
        const { lng, lat } = _value.location;
        // _value.city = _value.city ? _value.city : _value.district;
        if (!_value.city) {
          _value.city = _value.district;
          _value.district = "";
          _value.street = "";
        }
        this.address =
          _value.province +
          _value.city +
          _value.district +
          _value.street +
          _value.business;
          // console.log(_value,this.address,'_value')

        const area =
          _value.province === _value.city ? _value.district : _value.city;
        this.createMarker(lng, lat, this.address, _value.province, area, true);
      });

      const longitude = this.info.longitude * 1;
      const latitude = this.info.latitude * 1;
      const { province, city } = this.info;
      let point;
      if (longitude && latitude) {
        point = new BMapGL.Point(longitude, latitude);
        this.ac.setInputValue(this.projectAddressName);
        this.createMarker(
          longitude,
          latitude,
          this.projectAddressName,
          province,
          city
        );
      } else {
        point = this.info.city || "武汉市";
      }

      this.map.centerAndZoom(point, 12);
    },
    // 创建点, isAmplify是否自动放大地图
    async createMarker(lng, lat, address, province, city, isAmplify) {
      this.map.clearOverlays();
      const point = new BMapGL.Point(lng, lat);
      const marker = new BMapGL.Marker(point);
      this.map.addOverlay(marker);

      this.location = { lng, lat, province, city };

      if (isAmplify) {
        this.map.centerAndZoom(point, 18);
      }

      // 创建自定义覆盖物
      this.map.removeOverlay(this.customOverlay);
      this.customOverlay = new BMapGL.CustomOverlay(this.createDOM, {
        point,
        opacity: 0.5,
        offsetY: -10,
        properties: { address },
      });
      this.map.addOverlay(this.customOverlay);
    },

    onChange() {
      this.location = {};
      this.address = "";
      this.map.clearOverlays();
      this.map.removeOverlay(this.customOverlay);
    },

    openMap() {
      this.modalValue = true;
      if (this.map) return;

      this.$nextTick(() => {
        this.setMap();
      });
    },
    onSub() {
      if (!this.address) {
        this.$Message.error("请选择检索的地址，或在地图上直接锚点!");
        return;
      }
      console.log(this.location, " this.location");
      this.modalValue = false;
      this.$emit("input", this.address);
      this.$emit("getLocation", this.location);
    },
    createDOM({ address }) {
      var div = document.createElement("div");
      div.className = "custom-overlay-search";
      div.innerText = "地址: " + address + "";
      return div;
    },
  },
};
</script>

<style lang="less" scoped>
.icon-pin {
  cursor: pointer;
}
#l-map {
  width: 100%;
  height: 500px;
}

.modal-address {
  width: 600px;
  margin-bottom: 10px;
}
</style>
<style lang="less">
.custom-overlay-search {
  position: absolute;
  top: -40px;
  left: 0px;
  width: 300px;
  padding: 5px 10px;
  background-color: #fffeef;
  border-radius: 5px;
}

.tangram-suggestion-main {
  z-index: 99999;
}
</style>
